<template>
	<view>
		<u-navbar :is-back="false" :is-fixed="true" title="订单"></u-navbar>
		<!-- Tab navigation -->
		<view class="fixed-top bg-white" style="margin-top: 44px;">

			<view class="px-2 mt-2 pb-2 dfes">
				<i class="iconfont icon-jia text-8ED0F2 mr-2" @click="open('tabbar/order/addOrder')"></i>
				<u-search placeholder="请输入关键字 " height="60" border-color="#8ED0F2" search-icon-color="#8ED0F2"
					bg-color="#fff" v-model="keyword" :action-style="actionStyle"></u-search>
			</view>
			<scroll-view scroll-x class="tab-scroll" :scroll-into-view="scrollinto" :scroll-with-animation="true"
				:show-scrollbar="false">
				<view class="px-3 tab-item" v-for="(item,index) in tabBars" :id="'tab'+index" @click="changeTab(index)"
					:key="index">
					<view class="font-16 dfex" :class="tabIndex === index ? 'text-8ED0F2 active':''">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
		</view>

		<view class=" p-2" style="margin-top: 100px;">
			<swiper :current="tabIndex" @change="onChangeTab" style="height: 100vh;">
				<!-- Outer loop to iterate over each set of tabs and content -->
				<swiper-item v-for="(tabGroup, groupIndex) in tabs" :key="groupIndex">
					<scroll-view scroll-y style="height: calc(100vh - 50px);">
						<!-- Inner loop to render tabs and content within each group -->
						<view v-for="(item, index) in tabGroup" :key="index" class="pb-2 mt-2 content-item">
							<!-- Add your tab content here -->
							<view class="show-dd pl-2 bg-white pt-2">
								<view class="dfes">
									<view class="font-14 text-333333 font-weight-bold">{{item.title}}</view>
									<view class="position-absolute text-FFC251 font-14" style="right: 10px;">
										{{item.dai}}
									</view>
								</view>
								<view class="lineHight mt-2">
									<view>订单编号：2024011647832932</view>
									<view>涉农企业：三亚芒果农业有限公司</view>
									<view>订单时间：2024年02月19日</view>
								</view>

								<view class="lineHight-3 text-right">
									<u-button v-if="item.su ===  '上游订单'" class="mr-1 borRound text-78AB06"
										:plain="false" :hair-line="false" size="mini" shape="circle"
										@click="open('tabbar/order/upstreamOrders')">查看订单</u-button>
									<u-button v-else class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false"
										size="mini" shape="circle"
										@click="open('tabbar/order/downstreamOrders')">查看订单</u-button>
									<u-button class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false"
										size="mini" shape="circle">关闭订单</u-button>
									<u-button class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false"
										size="mini" shape="circle">进度填写</u-button>
									<u-button class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false"
										size="mini" shape="circle" v-if="item.su ===  '上游订单'"
										@click="open('tabbar/order/modifyOrder')">修改订单</u-button>
									<u-button class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false"
										size="mini" shape="circle" v-else
										@click="open('tabbar/order/modifications')">修改订单</u-button>
									<u-button class="mr-1 borRound text-78AB06" :plain="false" :hair-line="false"
										size="mini" shape="circle">订单作废</u-button>
								</view>
							</view>

						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabBars: [{
						"id": 1,
						"name": "全部",
						"template": "new"
					},
					{
						"id": 2,
						"name": "对接中",
						"template": "tit"
					},
					{
						"id": 3,
						"name": "待评价",
						"template": "tit"
					},
					{
						"id": 4,
						"name": "已完成",
						"template": "tit"
					},
					{
						"id": 5,
						"name": "线下订单",
						"template": "tit"
					},
				],
				scrollinto: "",
				tabIndex: 0,
				keyword: '',
				actionStyle: {
					color: '#8ED0F2'
				},
				tabs: [
					[{
							title: "订单/服务名称商标注册",
							dai: '对接中',
							name: '上游服务商企业名称',
							shobu: '商标注册服务',
							pic: '150'
						},
						{
							title: "订单/服务名称商标注册",
							dai: '待评价',
							name: '上游服务商企业名称',
							shobu: '商标注册服务',
							pic: '150'
						},
						{
							title: "订单/服务名称商标注册",
							dai: '已完成',
							name: '上游服务商企业名称',
							shobu: '商标注册服务',
							pic: '150'
						},
						{
							title: "订单/服务名称商标注册",
							dai: '线下订单',
							name: '上游服务商企业名称',
							shobu: '商标注册服务',
							pic: '150'
						}
					],
					[{
							title: "市场需求标题",
							name: '芒果',
							shobu: '可商议',
							tiem: '2023.03.24'

						},

					],
					[{
							title: "市场需求标题",
							name: '芒果',
							shobu: '可商议',
							tiem: '2023.03.24'

						},

					],
					[{
							title: "市场需求标题",
							name: '芒果',
							shobu: '可商议',
							tiem: '2023.03.24'

						},

					],
					[{
							title: "市场需求标题",
							name: '芒果',
							shobu: '可商议',
							tiem: '2023.03.24'

						},

					],
				]
			};
		},
		methods: {
			open(path) {
				uni.navigateTo({
					url: '/pages/' + path
				})
			},
			// Change the active tab
			changeTab(index) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
				this.scrollinto = "tab" + index;
			},
			// Handle tab change event
			onChangeTab(e) {
				this.changeTab(e.detail.current);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tab-scroll {
		width: 100vw;
	}


	.tab-item {
		margin-left: 2px;
		display: inline-block;
		text-align: center;
		padding: 0 12px;
		line-height: 40px;

	}

	.active {
		border-bottom: 2px solid #8ED0F2;
	}
</style>